<template>
  <div class="about">
    <div class="hero-section">
      <div class="container">
        <div class="profile-card">
          <div class="profile-image">
            <img :src="IMAGES.PROFILE_DEMO" alt="个人照片">
          </div>
          <div class="profile-info">
            <h1>关于我</h1>
            <p class="tagline">热爱技术，专注AI领域的开发者</p>
            <div class="stats">
              <div class="stat-item">
                <span class="number">5+</span>
                <span class="label">年开发经验</span>
              </div>
              <div class="stat-item">
                <span class="number">20+</span>
                <span class="label">开源项目</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <section class="skills-section">
      <div class="container">
        <h2 class="section-title">专业技能</h2>
        <div class="skills-grid">
          <div class="skill-card">
            <i class="fas fa-code"></i>
            <h3>编程语言</h3>
            <p>Python, JavaScript/TypeScript, Go</p>
          </div>
          <div class="skill-card">
            <i class="fas fa-brain"></i>
            <h3>人工智能</h3>
            <p>机器学习, 深度学习, NLP</p>
          </div>
          <div class="skill-card">
            <i class="fas fa-database"></i>
            <h3>数据库</h3>
            <p>MySQL, MongoDB, Redis</p>
          </div>
        </div>
      </div>
    </section>

    <section class="experience-section">
      <div class="container">
        <h2 class="section-title">工作经历</h2>
        <div class="timeline">
          <div class="timeline-item" v-for="(item, index) in experience" :key="index">
            <div class="time">{{ item.period }}</div>
            <div class="content">
              <h3>{{ item.company }}</h3>
              <p class="position">{{ item.position }}</p>
              <p class="description">{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="education-section">
      <div class="container">
        <h2 class="section-title">教育背景</h2>
        <div class="education-grid">
          <div class="education-card" v-for="edu in education" :key="edu.school">
            <div class="edu-icon">
              <i class="fas fa-graduation-cap"></i>
            </div>
            <div class="edu-content">
              <h3>{{ edu.school }}</h3>
              <p class="degree">{{ edu.degree }}</p>
              <p class="period">{{ edu.period }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IMAGES } from '@/utils/images'

const experience = ref([
  {
    period: '2022 - 至今',
    company: '某科技公司',
    position: '高级开发工程师',
    description: '负责AI平台核心功能开发，优化系统性能'
  },
  {
    period: '2020 - 2022',
    company: '某互联网公司',
    position: '开发工程师',
    description: '参与多个大型项目开发，负责后端服务架构设计'
  }
])

const education = ref([
  {
    school: '某知名大学',
    degree: '计算机科学与技术 硕士',
    period: '2017 - 2020'
  },
  {
    school: '某知名大学',
    degree: '软件工程 学士',
    period: '2013 - 2017'
  }
])
</script>

<style scoped lang="scss">
.about {
  .hero-section {
    background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
    padding: 80px 0;
    color: white;

    .profile-card {
      display: flex;
      align-items: center;
      gap: 40px;
      background: rgba(255, 255, 255, 0.1);
      padding: 40px;
      border-radius: 20px;
      backdrop-filter: blur(10px);

      @media (max-width: 768px) {
        flex-direction: column;
        text-align: center;
      }

      .profile-image {
        flex-shrink: 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        overflow: hidden;
        border: 5px solid rgba(255, 255, 255, 0.2);

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .profile-info {
        h1 {
          font-size: 2.5rem;
          margin-bottom: 10px;
        }

        .tagline {
          font-size: 1.2rem;
          opacity: 0.9;
          margin-bottom: 30px;
        }

        .stats {
          display: flex;
          gap: 30px;

          @media (max-width: 768px) {
            justify-content: center;
          }

          .stat-item {
            text-align: center;

            .number {
              display: block;
              font-size: 2rem;
              font-weight: bold;
              margin-bottom: 5px;
            }

            .label {
              font-size: 0.9rem;
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 50px;
    color: var(--text-color);
    position: relative;
    padding-bottom: 15px;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: var(--primary-color);
    }
  }

  section {
    padding: 80px 0;

    &:nth-child(even) {
      background: #f8f9fa;
    }
  }

  .mission-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;

    .mission-card {
      text-align: center;
      padding: 40px 20px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-10px);
      }

      i {
        font-size: 3rem;
        color: var(--primary-color);
        margin-bottom: 20px;
      }

      h3 {
        margin-bottom: 15px;
        color: var(--text-color);
      }

      p {
        color: #666;
      }
    }
  }

  .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;

    .team-member {
      text-align: center;
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);

      .member-avatar {
        width: 150px;
        height: 150px;
        margin: 0 auto 20px;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      h3 {
        margin-bottom: 5px;
        color: var(--text-color);
      }

      .position {
        color: var(--primary-color);
        font-weight: 500;
        margin-bottom: 15px;
      }

      .description {
        color: #666;
        margin-bottom: 20px;
      }

      .social-links {
        display: flex;
        justify-content: center;
        gap: 15px;

        a {
          color: #666;
          font-size: 1.2rem;
          transition: color 0.3s ease;

          &:hover {
            color: var(--primary-color);
          }
        }
      }
    }
  }

  .timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;

    &::before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 100%;
      background: var(--primary-color);

      @media (max-width: 768px) {
        left: 0;
      }
    }

    .timeline-item {
      display: flex;
      justify-content: space-between;
      padding: 30px 0;

      @media (max-width: 768px) {
        flex-direction: column;
      }

      .time {
        flex: 1;
        text-align: right;
        padding-right: 30px;
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--primary-color);

        @media (max-width: 768px) {
          text-align: left;
          padding-left: 30px;
          margin-bottom: 10px;
        }
      }

      .content {
        flex: 1;
        padding-left: 30px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: -8px;
          top: 50%;
          transform: translateY(-50%);
          width: 16px;
          height: 16px;
          background: var(--primary-color);
          border-radius: 50%;

          @media (max-width: 768px) {
            left: -8px;
            top: 0;
          }
        }

        h3 {
          margin-bottom: 10px;
          color: var(--text-color);
        }

        p {
          color: #666;
          line-height: 1.6;
        }
      }
    }
  }

  .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;

    .value-card {
      text-align: center;
      padding: 40px 20px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-10px);
      }

      i {
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 20px;
      }

      h3 {
        margin-bottom: 15px;
        color: var(--text-color);
      }

      p {
        color: #666;
      }
    }
  }
}
</style> 